<template>
	<view class="my-tickets-container">
		<view class="page-header">
			<text class="title">我的工单</text>
			<text class="subtitle">查看和跟踪您的工单处理进度</text>
		</view>
		
		<view class="filter-bar">
			<view class="filter-item" :class="{active: currentFilter === 'all'}" @click="filterTickets('all')">
				<text class="iconfont icon-list"></text>
				<text>全部</text>
			</view>
			<view class="filter-item" :class="{active: currentFilter === 'processing'}" @click="filterTickets('processing')">
				<text class="iconfont icon-edit"></text>
				<text>处理中</text>
			</view>
			<view class="filter-item" :class="{active: currentFilter === 'completed'}" @click="filterTickets('completed')">
				<text class="iconfont icon-check"></text>
				<text>已完成</text>
			</view>
		</view>
		
		<view class="tickets-list">
			<view class="ticket-item" v-for="ticket in filteredTickets" :key="ticket.id" @click="viewTicketDetail(ticket.id)">
				<view class="ticket-header">
					<text class="ticket-title">{{ ticket.title }}</text>
					<text class="ticket-status" :class="ticket.status">{{ getStatusText(ticket.status) }}</text>
				</view>
				<view class="ticket-content">
					<text class="ticket-type">{{ ticket.type }}</text>
					<text class="ticket-desc">{{ ticket.description }}</text>
				</view>
				<view class="ticket-footer">
					<text class="ticket-time">{{ ticket.createTime }}</text>
					<text class="ticket-id">ID: {{ ticket.id }}</text>
				</view>
			</view>
			
			<view class="no-data" v-if="filteredTickets.length === 0">
				<text class="iconfont icon-empty empty-icon"></text>
				<view>暂无工单数据</view>
				<button class="create-btn" @click="goToCreateTicket">
					<text class="iconfont icon-add"></text>
					<text>创建工单</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { isLoggedIn, getUserInfo } from '../../../utils/auth.js';
	import { getTicketList } from '../../../apis/ticket.js';
	
	export default {
		data() {
			return {
				currentFilter: 'all',
				tickets: []
			}
		},
		onLoad() {
			// 检查用户是否已登录
			if (!isLoggedIn()) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/login'
					});
				}, 1000);
				return;
			}
			
			// 加载用户工单数据
			this.loadUserTickets();
		},
		computed: {
			filteredTickets() {
				if (this.currentFilter === 'all') {
					return this.tickets;
				} else if (this.currentFilter === 'processing') {
					return this.tickets.filter(ticket => ticket.status === 'processing');
				} else if (this.currentFilter === 'completed') {
					return this.tickets.filter(ticket => ticket.status === 'completed');
				}
				return this.tickets;
			}
		},
		methods: {
			// 加载用户工单数据
			async loadUserTickets() {
				try {
					// 获取当前用户ID
					const userInfo = getUserInfo();
					const userId = userInfo ? (userInfo.id || userInfo.userId) : null;
					
					if (!userId) {
						console.error('无法获取用户ID');
						uni.showToast({
							title: '无法获取用户信息',
							icon: 'none'
						});
						return;
					}
					
					// 调用API获取工单列表，根据用户ID筛选
					const res = await getTicketList({ userId });
					
					if (res.code === 0) {
						// 处理返回的工单数据
						this.tickets = (res.data?.records || res.data || []).map(ticket => {
							return {
								id: ticket.id,
								title: ticket.title,
								type: ticket.type || '未知类型',
								description: ticket.des || ticket.description || '',
								status: this.convertStatus(ticket.status),
								createTime: ticket.createTime || ticket.createTime || ''
							};
						});
					} else {
						uni.showToast({
							title: res.message || '获取工单失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取工单列表失败:', error);
					uni.showToast({
						title: '获取工单失败: ' + (error.msg || error.message || '未知错误'),
						icon: 'none'
					});
				}
			},
			
			// 转换状态值
			convertStatus(status) {
				// 根据后端返回的状态值进行转换
				const statusMap = {
					0: 'processing',     // 处理中
					1: 'completed',      // 已完成
					'处理中': 'processing',
					'已完成': 'completed',
					'processing': 'processing',
					'completed': 'completed'
				};
				return statusMap[status] || 'processing';
			},
			
			filterTickets(filter) {
				this.currentFilter = filter;
			},
			
			getStatusText(status) {
				const statusMap = {
					'processing': '处理中',
					'completed': '已完成'
				};
				return statusMap[status] || '未知';
			},
			
			viewTicketDetail(id) {
				uni.navigateTo({
					url: `/pages/customer/ticket-detail/ticket-detail?id=${id}`
				});
			},
			
			goToCreateTicket() {
				uni.navigateTo({
					url: '/pages/customer/create-ticket/create-ticket'
				});
			}
		}
	}
</script>

<style scoped>
	.my-tickets-container {
		padding: 20rpx;
	}
	
	.page-header {
		text-align: center;
		padding: 40rpx 0;
		margin-bottom: 20rpx;
	}
	
	.title {
		font-size: 40rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #999;
	}
	
	.filter-bar {
		display: flex;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}
	
	.filter-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.filter-item .iconfont {
		margin-right: 10rpx;
		font-size: 32rpx;
	}
	
	.filter-item.active {
		background-color: #007AFF;
		color: white;
		border-radius: 10rpx;
	}
	
	.ticket-item {
		background-color: white;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.ticket-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}
	
	.ticket-title {
		font-size: 32rpx;
		font-weight: bold;
		flex: 1;
	}
	
	.ticket-status {
		font-size: 24rpx;
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
	}
	
	.ticket-status.processing {
		background-color: #ffeee0;
		color: #ff6b00;
	}
	
	.ticket-status.completed {
		background-color: #e8f8f5;
		color: #00b894;
	}
	
	.ticket-content {
		margin-bottom: 15rpx;
	}
	
	.ticket-type {
		font-size: 26rpx;
		color: #007AFF;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.ticket-desc {
		font-size: 28rpx;
		color: #666;
	}
	
	.ticket-footer {
		display: flex;
		justify-content: space-between;
	}
	
	.ticket-time, .ticket-id {
		font-size: 24rpx;
		color: #999;
	}
	
	.no-data {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
	}
	
	.empty-icon {
		font-size: 100rpx;
		color: #ccc;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.create-btn {
		background: linear-gradient(135deg, #007AFF, #00BCFF);
		color: white;
		border: none;
		padding: 20rpx 40rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
		display: inline-flex;
		align-items: center;
	}
	
	.create-btn .iconfont {
		margin-right: 10rpx;
		font-size: 36rpx;
	}
</style>